【摸鱼神器】拖拖点点，列表现——做列表居然可以不用写代码！
上一篇介绍了一下如何实现一个可以依赖 json 渲染的列表控件，既然需要 json 文件，那么如何维护这个 json 文件就成了重点，如果没有好的维护方案的话，那么还不如直接用UI库。
所以需要我们做一个维护 json 文件的小工具，维护 json 有多方法：
最基础的方法就是手撸，显然这个是下下策。 可以通过编辑器的插件来维护，不过这种方式针对所有 json，不会对某种需求做优化。 或者做一套维护 json 的增删改查，这样可以维护 json 的每一个属性，只是实现起来比较繁琐。 最后就是可视化 + 拖拽的方式，对于某些属性的修改，用起来会非常爽。
于是我们发扬一不怕苦，二不怕累的钻研精神，终于做了一个比较完美的小工具，可以非常方便的维护 json 文件。
小工具的功能
通过拖拽的方式修改一部分属性。 修改【列表】的属性。 添加、修改【列】的属性。 修改后立即重新渲染看效果。
修改的时候可以立即看到效果，json 对应的是组件的属性，更改后如果能够立即看到效果，显然更直观。
可视化 + 拖拽 + 手势 的方式修改属性
可以实现以下功能：
表头和内容的对齐方式。 调整列的先后顺序，交换两个列的位置。 调整列宽 移除列
优点是用起来比较爽，尤其是调整列的宽度、先后顺序的时候，非常直观、简单、快捷。 当然缺点也很明显，只能用于维护一部分属性，其他属性的维护还得做表单维护。
拖拽是动态的，图片表达不出来，所以录屏做个视频演示。
视频演示
列表属性
我们可以基于 el-table 的属性做一个表单：
修改表单的值，会立即刷新，可以实时查看属性变化后的效果。 也可以快速掌握 el-table 各个属性都是什么意思。
还可以用“抽屉”的方式维护列表属性
视频演示
列的属性
我们可以基于 el-table-colmun 的属性做一个表单：
可以修改列的属性：
对齐方式 字段名、标签 宽度 固定列 是否排序 是否可以拖拽 是否显示提示 class名称 其他
还可以用 “抽屉”的方式维护列的属性
视频演示
导出
json 维护好之后需要导出的功能，这里提供了两种方式：
作为 el-table 的属性，使用 v-bind="tableProps"的方式绑定。
json 文件的方式，可以用于渲染列表。
导出 json（得到 json 文件或者 js 对象）
下面详细介绍一下。
实现方式
使用 vue 的自定义指令，实现拖拽功能。 使用表单实现其他属性的维护。
基本没啥技术含量，都是体力活，这里就不细说了，感兴趣的话，可以看源码。
源码
https://gitee.com/naturefw-code/nf-rollup-ui-controller
https://gitee.com/naturefw-code/nf-rollup-help
本文作者：自然框架
个人网址：jyk.cnblogs.com
声明：本文为 脚本之家专栏作者 投稿，未经允许请勿转载。
写的不错？赞赏一下
长按扫码赞赏我
推荐阅读：原创推荐：
结合 Vuex 和 Pinia 做一个适合自己的状态管理nf-state
一篇文章说清 webpack、vite、vue-cli、create-vue 的区别